<!doctype html>
<html>
<head>
	<title>Property Sheet: Basic Initialization</title>
	<script src="../../codebase/webix.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="../../codebase/webix.css">

<body>
	<script>

    var color_options = [
        {id:1, value:"red"},
        {id:2, value:"blue"},
        {id:3, value:"green"},
        {id:4, value:"orange"},
        {id:5, value:"grey"},
        {id:6, value:"yellow"}
    ];

    var position_options = [
        {id:1, value:"left"},
        {id:2, value:"right"},
        {id:3, value:"top"},
        {id:4, value:"bottom"}
    ];


	var propertysheet_1 = {
		view:"property",  id:"sets", width:300,
		elements:[
			{ label:"Layout", type:"label" },
			{ label:"Width", type:"text", id:"width", value: 250},
			{ label:"Height", type:"text", id:"height"},
            { label:"Password", type:"password", id:"pass"},
			{ label:"Data loading", type:"label" },
			{ label:"Data url", type:"text", id:"url", value:"http://webix.com/data"},
            { label:"Type", type:"select", options:["json","xml","csv"], id:"type"},
            { label:"Position", type:"select", options:position_options, id:"position"},
            { label:"Date", type:"date", id:"date", format:webix.i18n.dateFormatStr},
            { label:"Color", type:"combo", options:color_options, id:"color"},
			{ label:"Use JSONP", type:"checkbox", id:"jsonp"}
		]
	};

	webix.ui({
		cols:[
            { template:"left" },
			{rows:[
				propertysheet_1
			]}
		]
	});

    $$("sets").setValues({
        width:250,
        height:480,
        url:"http://webix.com/data",
        type:"json",
        position:2,
        date:new Date(),
        color:1

    });
		
	</script>


</body>
</html>
